<div cdkDropListGroup>
    <div class="main-container">
        <h2 class="mat-h3 index-h2">基础学习</h2>

        <div cdkDropList [cdkDropListData]="like" class="index-drop-list" (cdkDropListDropped)="drop($event)">
            <div class="index-book" *ngFor="let item of like" cdkDrag>
                <mat-card class="index-card mat-elevation-z3" routerLink="/{{item.link}}" routerLinkActive="{{item.active}}">
                    <mat-card-header>
                        <mat-card-title>{{item.title}}</mat-card-title>
                        <mat-card-subtitle>{{item.title}}</mat-card-subtitle>
                    </mat-card-header>
                    <img mat-card-image src="{{item.image}}" alt="{{item.title}}">
                </mat-card>
            </div>
        </div>
    </div>

    <div class="main-container">
        <h2 class="mat-h3 index-h2 red-border-top">拓展学习</h2>

        <div cdkDropList [cdkDropListData]="other" class="index-drop-list" (cdkDropListDropped)="drop($event)">
            <div class="index-book" *ngFor="let item of other" cdkDrag>
                <mat-card class="index-card mat-elevation-z3">
                    <mat-card-header>
                        <mat-card-title>{{item.title}}</mat-card-title>
                        <mat-card-subtitle>{{item.title}}</mat-card-subtitle>
                    </mat-card-header>
                    <img mat-card-image src="{{item.image}}" alt="{{item.title}}">
                </mat-card>
            </div>
        </div>
    </div>
</div>